04 Todo 등록 및 상세 화면 | ✅ 편저: 코담 운영자

✅ 4. Todo 등록 및 상세 화면 설명

1️⃣ Todo 등록 뷰: TodoCreateView

todo/views.py

class TodoCreateView(LoginRequiredMixin, CreateView):
    model = Todo
    form_class = TodoForm
    template_name = "todo/todo_form.html"
    success_url = reverse_lazy("todo:todo_list")

    def form_valid(self, form):
        form.instance.author = self.request.user  # 작성자 지정
        return super().form_valid(form)

🔎 주요 기능 요약

• 로그인한 사용자만 접근 가능
• TodoForm을 기반으로 할 일 생성
• 작성자는 자동 지정 (form_valid()에서 처리)
• 성공 시 할 일 목록 페이지로 이동

---

2️⃣ 등록 템플릿: todo_form.html

{% extends "todo/include/base.html" %}
{% block title %}할일 등록{% endblock %}

{% block content %}
<form method="post" class="...">
  {% csrf_token %}

  <!-- 이름 -->
  <input type="text" name="name" value="{{ form.name.value }}" ...>
  <!-- 설명 -->
  <textarea name="description">{{ form.description.value }}</textarea>
  <!-- 완료 여부 -->
  <input type="checkbox" name="complete" {% if form.complete.value %}checked{% endif %}>
  <!-- 경험치 -->
  <input type="number" name="exp" value="{{ form.exp.value|default:0 }}">

  <!-- 버튼 -->
  <button type="submit">등록</button>
  <a href="{% url 'todo:todo_list' %}">취소</a>
</form>
{% endblock %}

💡 UI 특징

• Tailwind CSS로 깔끔한 디자인 구성
• 에러 메시지 출력 지원
• 등록 / 취소 버튼으로 사용자 흐름 유도

---

3️⃣ 상세 뷰: TodoDetailView

todo/views.py

class TodoDetailView(LoginRequiredMixin, DetailView):
    model = Todo
    template_name = "todo/todo_detail.html"
    context_object_name = "todo"

    def get_queryset(self):
        return Todo.objects.filter(author=self.request.user)  # 보안: 본인만 조회 가능

🔎 주요 기능 요약

• pk로 특정 할 일 조회
• 로그인 사용자 소유 여부 확인
• 조회 전용 화면이므로 수정/삭제 없음

---

4️⃣ 상세 템플릿: todo_detail.html

{% extends "todo/include/base.html" %}
{% block title %}할일 상세 보기{% endblock %}

{% block content %}
<div class="...">
  <h2>{{ todo.name }}</h2>

  {% if todo.complete %}<span>완료됨 ✅</span>
  {% else %}<span>진행 중 ⏳</span>{% endif %}

  <div>{{ todo.description }}</div>
  <div>생성일: {{ todo.created_at }}</div>
  {% if todo.completed_at %}
    <div>완료일: {{ todo.completed_at }}</div>
  {% endif %}

  <div>
    <a href="{% url 'todo:todo_update' todo.id %}">수정</a>
    <a href="{% url 'todo:todo_list' %}">목록으로</a>
  </div>
</div>
{% endblock %}

💡 UI 특징

• 간결한 카드형 상세 보기 디자인
• 상태에 따라 완료됨 / 진행 중 뱃지 출력
• 생성일/완료일 정보를 명확히 표시
• 수정, 목록으로 버튼으로 자연스러운 이동 제공

---

✅ URL 연결

# todo/urls.py
path("create/", TodoCreateView.as_view(), name="todo_create"),
path("<int:pk>/", TodoDetailView.as_view(), name="todo_detail"),

---

✅ 전체 흐름 요약

1. 사용자는 /todo/create/로 이동해 할 일 작성
2. TodoCreateView가 처리하고 저장
3. 저장 후 목록 페이지로 리디렉션
4. 목록에서 항목 클릭 시 /todo/<id>/ 상세 페이지로 이동
5. 상세 화면에서는 상태 및 설명 확인 가능